<template>
  <a-modal title="修改密码"
           :visible="show"
           @ok="changePassword"
           @cancel="close"
  >
    <a-form style="text-align: center" :label-col="{span:5}" :wrapper-col="{span:12}">
      <a-form-item label="旧密码">
        <a-input-password placeholder="请输入旧密码" v-model="oldPassword"/>
      </a-form-item>
      <a-form-item label="新密码">
        <a-input-password placeholder="请输入新密码" v-model="newPassword"/>
      </a-form-item>
      <a-form-item label="密码确认">
        <a-input-password placeholder="请确认密码" v-model="newPasswordConfirm"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import {changePassword} from "@/api/users/password";

export default{
  name: "updatePassword",
  props: {
    show: Boolean
  },
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      newPasswordConfirm: "",
    }
  },
  methods: {
    changePassword() {
      if (!this.oldPassword || !this.newPassword || !this.newPasswordConfirm) {
        this.$message.error("信息输入不全，请确认");
        return;
      }
      if (this.newPassword !== this.newPasswordConfirm) {
        this.$message.error("两次输入的密码不一致");
        return;
      }
      changePassword(this.oldPassword, this.newPassword)
          .then(res => {
            if (res.result) {
              this.$message.success("密码修改成功");
              this.close();
            } else {
              this.$message.error(res.msg);
            }
          })
    },
    close() {
      this.$emit("close");
    }
  },
  watch: {
    show(old) {
      if (old) {
        this.newPassword = "";
        this.oldPassword = "";
        this.newPasswordConfirm = "";
      }
    }
  }
}
</script>